<template>
    <div ref="chart" style="width: 100%;height: 65vh"></div>
</template>

<script >
  import * as echarts from 'echarts/core';
  import {
    BarChart
  } from 'echarts/charts';
  import {
    TitleComponent,
    TooltipComponent,
  } from 'echarts/components';
  import {
    CanvasRenderer
  } from 'echarts/renderers';

  import { LegendComponent } from 'echarts/components';
  import { PieChart } from 'echarts/charts';

  echarts.use(
    [BarChart,TitleComponent, TooltipComponent,  CanvasRenderer,
        LegendComponent,PieChart]
  );

  export default {
    data(){
      return{
          myChart:()=>{return echarts.init(this.$refs.chart)}
      }
    },
      props:['optionValue'],
      mounted(){
      this.init(this.optionValue)
    },
    methods:{
      init(a) {
        this.myChart().setOption(
          {
              color:[
                  "#1e90ff",
                  "#ee0a24"
              ],
              title: {
                  text: '收支统计',
                  subtext: '',
                  left: 'center',
                  top:'5%'
              },
              tooltip: {
                  trigger: 'item'
              },
              legend: {
                  orient: 'vertical',
                  left: '5%',
                  top:'5%'
              },
              series: [
                  {
                      name: '来源分析',
                      type: 'pie',
                      radius: '50%',
                      data: [
                          {value:a[0], name: '收入'},
                          {value: a[1], name: '支出'},
                      ],
                      emphasis: {
                          itemStyle: {
                              shadowBlur: 10,
                              shadowOffsetX: 0,
                              shadowColor: 'rgba(0, 0, 0, 0.5)'
                          }
                      },
                      minShowLabelAngle: 1,
                      stillShowZeroSum: false,
                      label:{
                          show:true
                      }

                  }
              ]
          }
        );
      }
    },


  }
</script>

<style lang="scss" scoped>
    .textTip{
        position: absolute;
        top: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #888888;
        margin-top: 30vh;
        .icon{
            fill:currentColor;
        }
    }
</style>

